<template>
  <div class="w-[100%] h-[100%] relative">
    <Title title="全局设置"/>


    <div class="mt-[30px]">
      <div class="item flex">
        <div class="left relative w-[243px] mr-[24px] text-right">下单设置
          <div class="text-[12px] text-[#999999]  absolute top-[3px] left-[267px]"
               style="white-space: nowrap">
            有效防止恶意下单
          </div>
        </div>

        <div class="right pt-[30px]">
          同一IP在1小时内对同一商品，最多支持下
          <el-input-number v-model="globeInfo.orderNumber" :step="1"/>
          单，超过部分下单会直接变成无效订单
        </div>
      </div>

      <div class="item flex mt-[30px]">
        <div class="left relative w-[243px] mr-[24px] text-right">下单成功是否清除表单信息</div>

        <div class="right pt-[30px]">
          <div>
            <el-switch v-model="globeInfo.orderDelectSteat" :active-value="1" :inactive-value="0"/>
            开启
          </div>
          <div class="mt-[25px] text-[#999999]">
            注：开启好处，可以减少客户返回下单页，二次点击下单，产生重复订单；关闭好处，如果选择错规格、数量，不需要再次填写表单信息
            {{ globeInfo.orderDelectSteat }}
          </div>

        </div>
      </div>

      <!--      <div class="item flex mt-[30px]">-->
      <!--        <div class="left relative w-[243px] mr-[24px] text-right">其他设置</div>-->

      <!--        <div class="right pt-[30px] flex items-center">-->
      <!--          图片上传：-->
      <!--          <div v-for="(item,index) in cloud" :key="index" class="flex items-center mr-[10px] cursor-pointer">-->
      <!--            <div class="w-[16px] h-[16px] bg mr-[5px]"-->
      <!--                 :style="`background-image:url(${index == 0 ? 'https://img.alicdn.com/imgextra/i3/801089336/O1CN01KsExIA2Ipwk9nYvg6_!!801089336.png' : 'https://img.alicdn.com/imgextra/i1/801089336/O1CN01RvdiEq2IpwkB9ePht_!!801089336.png'})`"></div>-->

      <!--            <div>{{ item.name }}</div>-->

      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->

    </div>

    <div class="absolute bottom-[60px] left-[267px]">
      <el-button size="large" class="w-[134px]" @click="handleBtnClick({ type: 'reset' })">重 置
      </el-button>
      <el-button size="large" class="w-[134px]" type="primary"
                 @click="handleBtnClick({ type: 'save' })">保 存
      </el-button>
    </div>

  </div>
</template>
<script setup lang="ts">
import {GlobeApi, GlobeVO} from "@/api/setting/globe";
import Title from "@/components/Title/index.vue"
import {throttle} from "@/utils";
import {useMessage} from "@/hooks/web/useMessage";

const message = useMessage();

const cloud = ref([
  {
    name: "亚马逊云",

  },
  {
    name: "阿里云"
  }
])

const queryParams = {
  pageNo: 1, pageSize: 1
}

const initInfo = {
  orderNumber: 1,
  orderDelectSteat: 0
}

const globeInfo = ref<GlobeVO>({
  ...initInfo
})

const queryInfo = async () => {
  let res = await GlobeApi.getOrderQuantityPage(queryParams);
  globeInfo.value = res.list && res.list.length > 0 ? res.list[0] : {
    ...initInfo
  }
}


const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  reset() {
    globeInfo.value = {
      ...initInfo
    }
  },
  save: throttle(async () => {
    if (globeInfo.value.id) {
      await GlobeApi.updateOrderQuantity(globeInfo.value)
    } else {
      await GlobeApi.createOrderQuantity(globeInfo.value)
    }
    message.success("操作成功")


  }, 1000)
}

onMounted(() => {
  queryInfo();
})
</script>
<style lang="scss" scoped>

</style>
